<template>
  <view class="transfer-page">
    <!-- 顶部蓝色导航栏+搜索 -->
    <view class="nav-bar">
      <view class="nav-search">
        <uni-icons type="search" size="22" color="#bbb" />
        <input class="search-input" placeholder="搜索" />
        <uni-icons type="location" size="22" color="#222" style="margin-left:auto;" />
      </view>
    </view>
    <!-- banner -->
    <image class="banner" src="https://img.yzcdn.cn/vant/cat.jpeg" mode="aspectFill"></image>
    <!-- 12宫格功能区 -->
    <view class="grid-area">
      <view class="grid-row" v-for="row in 3" :key="row">
        <view class="grid-item" v-for="col in 4" :key="col">
          <image class="grid-icon" :src="gridList[(row-1)*4+col-1].icon" />
          <text class="grid-text">{{ gridList[(row-1)*4+col-1].text }}</text>
        </view>
      </view>
    </view>
    <!-- 筛选区 -->
    <view class="filter-bar">
      <text class="filter-item" v-for="(item,i) in filterList" :key="i">{{ item }}</text>
    </view>
    <!-- 列表区 -->
    <view class="shop-list">
      <view class="shop-card" v-for="(item,i) in shopList" :key="i">
        <image class="shop-img" :src="item.img" />
        <view class="shop-info">
          <view class="shop-title">{{ item.title }}</view>
          <view class="shop-desc">{{ item.desc }}</view>
          <view class="shop-tags">
            <text class="shop-tag" v-for="(tag,j) in item.tags" :key="j">{{ tag }}</text>
          </view>
          <view class="shop-meta">
            <text>{{ item.area }}㎡</text>
            <text class="shop-price">{{ item.price }}元/月</text>
          </view>
        </view>
      </view>
    </view>
    <view class="no-more">没有更多了</view>
  </view>
</template>
<script setup>
const gridList = [
  { icon: '/static/transfer/catering.png', text: '餐饮美食' },
  { icon: '/static/transfer/market.png', text: '百货超市' },
  { icon: '/static/transfer/hotel.png', text: '宾馆酒店' },
  { icon: '/static/transfer/hairdressing.png', text: '美容美发' },
  { icon: '/static/transfer/lifeservice.png', text: '生活服务' },
  { icon: '/static/transfer/carbeauty.png', text: '汽车美容' },
  { icon: '/static/transfer/education.png', text: '教育培训' },
  { icon: '/static/transfer/pharmacy.png', text: '药店门诊' },
  { icon: '/static/transfer/entertain.png', text: '休闲娱乐' },
  { icon: '/static/transfer/suitcase.png', text: '服饰箱包' },
  { icon: '/static/transfer/building.png', text: '建材家居' },
  { icon: '/static/transfer/other.png', text: '空铺其他' }
]
const filterList = ['最新', '推荐', '急转', '全杭州▽', '行业▽', '价格▽', '更多▽']
const shopList = [
  { img: 'https://img.yzcdn.cn/vant/cat.jpeg', title: '拱墅区，个人超市转让，面积大，房租便宜，有烟证。', desc: '拱墅-石桥 康宁街38号 经营中', tags: ['百货超市', '临街门面', '急转', '外摆区'], area: 205, price: 8333 },
  { img: 'https://img.yzcdn.cn/vant/cat.jpeg', title: '拱墅区，个人超市转让，面积大，房租便宜，有烟证。', desc: '拱墅-石桥 康宁街38号 经营中', tags: ['百货超市', '临街门面', '急转', '外摆区'], area: 205, price: 8333 },
  { img: 'https://img.yzcdn.cn/vant/cat.jpeg', title: '拱墅区，个人超市转让，面积大，房租便宜，有烟证。', desc: '拱墅-石桥 康宁街38号 经营中', tags: ['百货超市', '临街门面', '急转', '外摆区'], area: 205, price: 8333 }
]
</script>
<style scoped>
.transfer-page { background: #f7f7f7; min-height: 100vh; }
.nav-bar { 
  background: #3496fa; 
  padding: 12rpx 24rpx; 
  box-sizing: border-box;
}
.nav-search { 
  background: #fff; 
  border-radius: 32rpx; 
  display: flex; 
  align-items: center; 
  padding: 0 24rpx; 
  height: 72rpx;
}
.search-input { 
  border: none; 
  background: transparent; 
  margin-left: 16rpx; 
  font-size: 28rpx; 
  flex: 1;
  color: #333;
}
.search-input::placeholder {
  color: #999;
}
.banner { width: 100vw; height: 140rpx; margin: 18rpx 0 0 0; border-radius: 12rpx; object-fit: cover; display: block; }
.grid-area { margin: 18rpx 0 0 0; background: #fff; border-radius: 12rpx; padding: 18rpx 0; }
.grid-row { display: flex; justify-content: space-around; margin-bottom: 12rpx; }
.grid-item { display: flex; flex-direction: column; align-items: center; flex: 1; }
.grid-icon { width: 56rpx; height: 56rpx; margin-bottom: 8rpx; }
.grid-text { font-size: 22rpx; color: #444; }
.filter-bar { background: #f5f5f5; display: flex; align-items: center; padding: 18rpx 0 0 0; margin-top: 12rpx; }
.filter-item { flex: 1; text-align: center; color: #888; font-size: 22rpx; }
.shop-list { margin: 0 0 0 0; }
.shop-card { display: flex; background: #fff; border-radius: 12rpx; margin: 18rpx 18rpx 0 18rpx; overflow: hidden; box-shadow: 0 2rpx 8rpx 0 rgba(80,80,120,0.06); }
.shop-img { width: 120rpx; height: 120rpx; object-fit: cover; border-radius: 10rpx; margin: 12rpx; }
.shop-info { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 12rpx 0; }
.shop-title { font-size: 26rpx; color: #222; font-weight: bold; margin-bottom: 6rpx; }
.shop-desc { font-size: 20rpx; color: #888; margin-bottom: 8rpx; }
.shop-tags { display: flex; flex-wrap: wrap; gap: 8rpx; margin-bottom: 8rpx; }
.shop-tag { background: #f5f5f5; color: #888; font-size: 18rpx; border-radius: 8rpx; padding: 2rpx 10rpx; }
.shop-meta { display: flex; align-items: center; justify-content: space-between; }
.shop-price { color: #ff6600; font-size: 22rpx; font-weight: bold; }
.no-more { text-align: center; color: #888; font-size: 22rpx; margin: 32rpx 0 0 0; }
</style> 